<template>
  <div class="box2">
    <el-form
      :model="ruleForm"
      :rules="rules"
      :inline="false"
      ref="ruleForm"
      label-width="200px"
      class="demo-ruleForm"
      size="medium"
    >
      <div class="must">
        <div class="botn">
          <div>
            <el-form-item label="质权人名称(中文)：" prop="pledgeeNameCn">
              <el-input v-model="ruleForm.pledgeeNameCn" placeholder="请填写姓名"></el-input>
            </el-form-item>
            <el-form-item label="(英文)：" prop="person_type">
              <el-input v-model="ruleForm.pledgeeNameEn" placeholder="请填写姓名"></el-input>
            </el-form-item>
            <el-form-item label="质权人地址：" prop="pledgeeSiteCn">
              <el-input v-model="ruleForm.pledgeeSiteCn" placeholder="请填写地址"></el-input>
            </el-form-item>
            <el-form-item label="电话：" prop="pledgeePhone">
              <el-input v-model="ruleForm.pledgeePhone" placeholder="请填写电话"></el-input>
            </el-form-item>
            <el-form-item label="营业执照编号/身份证号：" prop="pledgeeNum">
              <el-input v-model="ruleForm.pledgeeNum" placeholder="请填写名称或姓名"></el-input>
            </el-form-item>
            <el-form-item label="邮政编码：" prop="pledgeeCode">
              <el-input v-model="ruleForm.pledgeeCode" placeholder="请填写"></el-input>
            </el-form-item>
            <el-form-item label="代理机构名称：" prop="pledgeeOrg">
              <el-input v-model="ruleForm.pledgeeOrg" placeholder="请填写"></el-input>
            </el-form-item>
          </div>
          <div>
            <el-form-item label="出质人名称(中文)：" prop="pledgerNameCn">
              <el-input v-model="ruleForm.pledgerNameCn" placeholder="请填写姓名"></el-input>
            </el-form-item>
            <el-form-item label="(英文)：" prop="person_type">
              <el-input v-model="ruleForm.pledgerNameEn" placeholder="请填写姓名"></el-input>
            </el-form-item>
            <el-form-item label="出质人地址：" prop="pledgerSiteCn">
              <el-input v-model="ruleForm.pledgerSiteCn" placeholder="请填写地址"></el-input>
            </el-form-item>
            <el-form-item label="电话：" prop="pledgerPhone">
              <el-input v-model="ruleForm.pledgerPhone" placeholder="请填写电话"></el-input>
            </el-form-item>
            <el-form-item label="营业执照编号/身份证号：" prop="pledgerNum">
              <el-input v-model="ruleForm.pledgerNum" placeholder="请填写名称或姓名"></el-input>
            </el-form-item>
            <el-form-item label="邮政编码：" prop="pledgerCode">
              <el-input v-model="ruleForm.pledgerCode" placeholder="请填写"></el-input>
            </el-form-item>
            <el-form-item label="代理机构名称：" prop="pledgerOrg">
              <el-input v-model="ruleForm.pledgerOrg" placeholder="请填写"></el-input>
            </el-form-item>
          </div>
        </div>
        <div class="line"></div>

        <el-form-item label="商标专用权质权登记证编号：" prop="dedicated">
          <el-input v-model="ruleForm.dedicated" placeholder="请填写"></el-input>
        </el-form-item>
        <el-form-item label="申请变更事项：" prop="checkList">
          <el-checkbox-group v-model="ruleForm.checkList">
            <el-checkbox class="input" :label="1">质权人名称</el-checkbox>
            <el-checkbox class="input" :label="2">出质人名称</el-checkbox>
            <el-checkbox class="input" :label="3">担保债权数额</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="变更前担保债权数额：" prop="beforeAmount">
          <el-input v-model="ruleForm.beforeAmount" placeholder="请填写"></el-input>
        </el-form-item>
        <el-form-item label="变更后担保债权数额：" prop="afterAmount">
          <el-input v-model="ruleForm.afterAmount" placeholder="请填写"></el-input>
        </el-form-item>

        <div class="line"></div>
        <div class="addItem">
          <el-form-item label="变更出质人/质权人名称">
            <el-button type="primary" @click="alterName = true">添加</el-button>
            <div v-if="alterName" class="common alter">
              <el-form-item label="变更出质人名称" prop="person_type"></el-form-item>
              <div v-for="(item,index) in alterCommon" :key="index +'0'">
                <el-form-item :label="item.name" prop="person_type">
                  <el-input v-model="item.value" placeholder="请填写姓名"></el-input>
                </el-form-item>
                <el-form-item :label="item.englishName" prop="person_type">
                  <el-input v-model="item.englishValue" placeholder="请填写姓名"></el-input>
                </el-form-item>
                <el-form-item :label="item.site" prop="person_site">
                  <el-input v-model="item.siteValue" placeholder="请填写地址"></el-input>
                </el-form-item>
                <el-form-item :label="item.englishSite" prop="person_site">
                  <el-input v-model="item.englishSiteValue" placeholder="请填写地址"></el-input>
                </el-form-item>
              </div>
              <el-button icon="el-icon-plus" class="add-item" @click="plusAlter" circle></el-button>
              <el-form-item label="变更出质人名称" prop="person_type"></el-form-item>
              <div v-for="(item,indexs) in alterCommons" :key="indexs+'1'">
                <el-form-item :label="item.name" prop="person_type">
                  <el-input v-model="item.values" placeholder="请填写姓名"></el-input>
                </el-form-item>
                <el-form-item :label="item.englishName" prop="person_type">
                  <el-input v-model="item.englishValues" placeholder="请填写姓名"></el-input>
                </el-form-item>
                <el-form-item :label="item.site" prop="person_site">
                  <el-input v-model="item.siteValues" placeholder="请填写地址"></el-input>
                </el-form-item>
                <el-form-item :label="item.englishSite" prop="person_site">
                  <el-input v-model="item.englishSiteValues" placeholder="请填写地址"></el-input>
                </el-form-item>
              </div>
              <el-button icon="el-icon-plus" class="add-item" @click=" plussAlter" circle></el-button>
            </div>
          </el-form-item>
          <el-form-item label="其他共有出质人/质权人">
            <el-button type="primary" @click="addCon = true">添加</el-button>
            <div class="common add">
              <el-form-item label="其他共有出质人" prop="person_type"></el-form-item>
              <div v-for="(item,index) in common" :key="index +'2'">
                <el-form-item :label="item.name" prop="person_type">
                  <el-input v-model="item.value" placeholder="请填写姓名"></el-input>
                </el-form-item>
                <el-form-item :label="item.englishName" prop="person_type">
                  <el-input v-model="item.englishValue" placeholder="请填写姓名"></el-input>
                </el-form-item>
                <el-form-item :label="item.site" prop="person_site">
                  <el-input v-model="item.siteValue" placeholder="请填写地址"></el-input>
                </el-form-item>
                <el-form-item :label="item.englishSite" prop="person_site">
                  <el-input v-model="item.englishSiteValue" placeholder="请填写地址"></el-input>
                </el-form-item>
              </div>
              <el-button icon="el-icon-plus" class="add-item" @click="plus" circle></el-button>
              <el-form-item label="其他共有出质人" prop="person_type"></el-form-item>
              <div v-for="(item,indexs) in commons" :key="indexs+'3'">
                <el-form-item :label="item.name" prop="person_type">
                  <el-input v-model="item.values" placeholder="请填写姓名"></el-input>
                </el-form-item>
                <el-form-item :label="item.englishName" prop="person_type">
                  <el-input v-model="item.englishValues" placeholder="请填写姓名"></el-input>
                </el-form-item>
                <el-form-item :label="item.site" prop="person_site">
                  <el-input v-model="item.siteValues" placeholder="请填写地址"></el-input>
                </el-form-item>
                <el-form-item :label="item.englishSite" prop="person_site">
                  <el-input v-model="item.englishSiteValues" placeholder="请填写地址"></el-input>
                </el-form-item>
              </div>
              <el-button icon="el-icon-plus" class="add-item" @click=" pluss" circle></el-button>
            </div>
          </el-form-item>
        </div>

        <el-form-item>
          <div class="btns">
            <el-button type="primary" @click="outStep">上一步</el-button>
            <el-button type="primary" @click="dialogVisible = true">提交并审核</el-button>
          </div>
        </el-form-item>
        <el-dialog
          class="dialog"
          :show-close="false"
          :center="true"
          :visible.sync="dialogVisible"
          width="460px"
          :before-close="handleClose"
        >
          <div class="hint">
            <img src="../../assets/imgs/branch.png" alt="提示图片" />
            <span>选择您想去办理的网点</span>
          </div>
          <el-form-item label="选择网点：" prop="value">
            <el-select v-model="ruleForm.value" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.deptId"
                :label="item.deptName"
                :value="item.deptId"
              ></el-option>
            </el-select>
          </el-form-item>
          <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="submitForm('ruleForm')">确 定</el-button>
          </div>
        </el-dialog>
        <el-dialog
          class="hintMsg"
          :show-close="false"
          title="温馨提示"
          :visible.sync="centerDialogVisible"
          width="462px"
        >
          <span>您的信息已提交，工作人员将在3-5日内对你的信息审核，审核通过后即可预约业务，审核结果将通过短信的方式发送给你。</span>
          <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="skip">确 定</el-button>
          </span>
        </el-dialog>
      </div>
    </el-form>
  </div>
</template>
<script>
export default {
  data() {
    return {
      //网点列表
      options: [],
      //提交成功弹出框变量
      centerDialogVisible: false,
      //网点弹出框控制变量
      dialogVisible: false,
      //提交表单
      formData: new FormData(),
      //表单唯一id
      classId: "",
      //更变名称选项控制变量
      alterName: false,
      //添加共用人选项控制变量
      addCon: false,
      //共有人模板
      alterCommon: [],
      alterCommons: [],
      common: [],
      commons: [],
      //变更模板
      alterMount1: {
        BeforeNameCN: "",
        BeforeNameEN: "",
        AfterNameCN: "",
        AfterNameEN: "",
        AddCategories: 1,
      },
      alterMount2: {
        BeforeNameCN: "",
        BeforeNameEN: "",
        AfterNameCN: "",
        AfterNameEN: "",
        AddCategories: 2,
      },
      commonMount1: {
        BeforeNameCN: "",
        BeforeNameEN: "",
        BeforeAddressCN: "",
        BeforeAddressEN: "",
        AddCategories: 3,
      },
      commonMount2: {
        BeforeNameCN: "",
        BeforeNameEN: "",
        BeforeAddressCN: "",
        BeforeAddressEN: "",
        AddCategories: 4,
      },
      //填写的信息
      ruleForm: {
        //质权人信息
        pledgeeNameCn: "424",
        pledgeeNameEn: "224",
        pledgeeSiteCn: "242",
        pledgeeNum: "224",
        pledgeePhone: 123123141,
        pledgeeCode: 123123,
        pledgeeOrg: "242",
        //出质人信息
        c: "2424",
        c: "424",
        c: "224",
        c: "424",
        c: 123123141,
        c: 12312313,
        c: "224",
        //其他信息
        dedicated: 234234234,
        beforeAmount: "242",
        afterAmount: "2424",
        checkList: [],
        value: "",
        //附加信息
        alterCommonArr: [],
        alterCommonArrs: [],
        commonArr: [],
        commonArrs: [],
      },
      rules: {
        pledgeeNameCn: [
          { required: true, message: "选项不能为空", trigger: "change" },
        ],
        pledgeeNameEn: [
          { required: true, message: "选项不能为空", trigger: "change" },
        ],
        pledgeeSiteCn: [
          { required: true, message: "选项不能为空", trigger: "change" },
        ],
        pledgeePhone: [
          { required: true, message: "选项不能为空", trigger: "change" },
        ],
        pledgeeNum: [
          { required: true, message: "选项不能为空", trigger: "change" },
        ],
        pledgeeOrg: [
          { required: true, message: "选项不能为空", trigger: "change" },
        ],

        pledgerNameCn: [
          { required: true, message: "选项不能为空", trigger: "change" },
        ],
        pledgerNameEn: [
          { required: true, message: "选项不能为空", trigger: "change" },
        ],
        pledgerSiteCn: [
          { required: true, message: "选项不能为空", trigger: "change" },
        ],
        pledgerPhone: [
          { required: true, message: "选项不能为空", trigger: "change" },
        ],
        pledgerNum: [
          { required: true, message: "选项不能为空", trigger: "change" },
        ],
        pledgerOrg: [
          { required: true, message: "选项不能为空", trigger: "change" },
        ],

        dedicated: [
          { required: true, message: "选项不能为空", trigger: "change" },
        ],
        beforeAmount: [
          { required: true, message: "选项不能为空", trigger: "change" },
        ],
        afterAmount: [
          { required: true, message: "选项不能为空", trigger: "change" },
        ],
        checkList: [
          { required: true, message: "选项不能为空", trigger: "change" },
        ],
        value: [{ required: true, message: "选项不能为空", trigger: "change" }],
      },
    };
  },
  mounted() {
    //获取从存储在路由中的classId
    this.classId = this.$route.query.id;
    //获取网点列表
    this.$http.get("/trademark/system/dept/findDept").then((res) => {
      this.options = res.data.data;
    });
  },
  watch: {
    //通过数据监听的方式将共有人模板中的信息同步到ruleForm.commonArr中
    alterCommon: {
      handler(newName, oldName) {
        this.alterCommon.forEach((item, index) => {
          this.ruleForm.alterCommonArr[index].BeforeNameCN = item.value;
          this.ruleForm.alterCommonArr[index].BeforeNameEN = item.englishValue;
          this.ruleForm.alterCommonArr[index].AfterNameCN = item.siteValue;
          this.ruleForm.alterCommonArr[index].AfterNameEN =
            item.englishSiteValue;
          this.ruleForm.alterCommonArr[index].AddCategories = 1;
        });
      },
      deep: true,
    },
    alterCommons: {
      handler(newName, oldName) {
        this.alterCommons.forEach((item, index) => {
          this.ruleForm.alterCommonArrs[index].BeforeNameCN = item.values;
          this.ruleForm.alterCommonArrs[index].BeforeNameEN =
            item.englishValues;
          this.ruleForm.alterCommonArrs[index].AfterNameCN = item.siteValues;
          this.ruleForm.alterCommonArrs[index].AfterNameEN =
            item.englishSiteValues;
          this.ruleForm.alterCommonArrs[index].AddCategories = 2;
        });
      },
      deep: true,
    },
    common: {
      handler(newName, oldName) {
        this.common.forEach((item, index) => {
          this.ruleForm.commonArr[index].BeforeNameCN = item.value;
          this.ruleForm.commonArr[index].BeforeNameEN = item.englishValue;
          this.ruleForm.commonArr[index].BeforeAddressCN = item.siteValue;
          this.ruleForm.commonArr[index].BeforeAddressEN =
            item.englishSiteValue;
          this.ruleForm.commonArr[index].AddCategories = 3;
        });
      },
      deep: true,
    },
    commons: {
      handler(newName, oldName) {
        this.commons.forEach((item, index) => {
          this.ruleForm.commonArrs[index].BeforeNameCN = item.values;
          this.ruleForm.commonArrs[index].BeforeNameEN = item.englishValues;
          this.ruleForm.commonArrs[index].BeforeAddressCN = item.siteValues;
          this.ruleForm.commonArrs[index].BeforeAddressEN =
            item.englishSiteValues;
          this.ruleForm.commonArrs[index].AddCategories = 4;
        });
      },
      deep: true,
    },
  },
  methods: {
    //返回上一步
    outStep() {
      this.$emit("wp", 1, "请填写申请业务信息");
    },
    //提示模板
    open1(msg, types = "success") {
      this.$message({
        message: msg,
        type: types,
      });
    },
    //弹出框的选项确认框
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
    //表单提交事件
    submitForm(formName) {
      let _this = this;
      this.$refs[formName].validate((valid) => {
        if (valid) {
          //每次提交重新生成新的FormData用于储存新的数据
          this.formData = new FormData();
          this.dialogVisible = false;
          //获取vuex中保存的步骤二中的数据

          let {
            name,
            englishName,
            number,
            person_type,
            site,
            phone,
            postal,
            nationality,
            englishSite,
          } = this.$store.state.storeDatas;
          //将所有数组中的内容合并到一起发送
          this.ruleForm.commonArr = this.ruleForm.commonArr.concat(
            this.ruleForm.alterCommonArr,
            this.ruleForm.alterCommonArrs,
            this.ruleForm.commonArr,
            this.ruleForm.commonArrs
          );
          //向FormData中添加数据
          this.formData.append("pledgeeNameCN", this.ruleForm.pledgeeNameCn);
          this.formData.append("pledgeeNameEN", this.ruleForm.pledgeeNameEn);
          this.formData.append("pledgeeAddress", this.ruleForm.pledgeeSiteCn);
          this.formData.append("creditNum", this.ruleForm.pledgeeNum);
          this.formData.append("phoneNum", this.ruleForm.pledgeePhone);
          this.formData.append("postCode", this.ruleForm.pledgeeCode);
          this.formData.append("agencyName", this.ruleForm.pledgeeOrg);
          this.formData.append("classId", this.classId);

          this.formData.append("OutNameCN", this.ruleForm.pledgerNameCn);
          this.formData.append("OutNameEN", this.ruleForm.pledgerNameEn);
          this.formData.append("OutAddress", this.ruleForm.pledgerSiteCn);
          this.formData.append("OutCreditNum", this.ruleForm.pledgerNum);
          this.formData.append("OutPhoneNum", this.ruleForm.pledgerPhone);
          this.formData.append("OutPostCode", this.ruleForm.pledgeeCode);
          this.formData.append("OutAgencyName", this.ruleForm.pledgerOrg);

          this.formData.append("TradeNumber;", this.ruleForm.dedicated);
          this.formData.append("BeforeAmount", this.ruleForm.beforeAmount);
          this.formData.append("AfterAmount", this.ruleForm.afterAmount);
          this.formData.append(
            "AppChange",
            JSON.stringify(this.ruleForm.checkList)
          );

          this.formData.append("branchNetworkId", this.ruleForm.value);
          // this.formData.append("userId", "2");
          this.formData.append(
            "ProPledgeAppendJson",
            JSON.stringify(this.ruleForm.commonArr)
          );
          //   this.formData.append("appAddCn", site);
          //   this.formData.append("appAddEn", englishSite);
          //   this.formData.append("appNameCn", name);
          //   this.formData.append("appNameEn", englishName);
          //   this.formData.append("postCode", postal);
          //   this.formData.append("phone", phone);
          //   this.formData.append("imgAdd", person_type);
          //   this.formData.append("userId", "2");

          //配置请求头
          var config = {
            header: {
              "Content-Type": "multipart/form-data",
            },
          };
          // axios向后端发送数据
          this.$http
            .post("/trademark/ProPledge/firstSubmit", this.formData, config)
            .then(function (response) {
              //若状态码不为200则不跳转
              if (response.data.code != 200) {
                _this.open1("提交失败", "error");
                return;
              }
              _this.centerDialogVisible = true;
            })
            .catch(function (error) {});
        } else {
          return false;
        }
      });
    },
    //跳转函数
    skip() {
      this.centerDialogVisible = false;
      this.open1("操作成功");
      this.$router.push({
        path: "/business/myBusiness/auditing",
      });
    },
    //点击添加更变许可人
    plusAlter() {
      let objCommom = JSON.parse(JSON.stringify(this.alterMount1));
      this.ruleForm.alterCommonArr.push(objCommom);
      //let objValue = JSON.parse(JSON.stringify(this.common[0]))
      this.alterCommon.push({
        name: "名称(中文)：",
        englishName: "(英文)：",
        site: "地址(中文)：",
        englishSite: "(英文)：",
        value: "",
        englishValue: "",
        siteValue: "",
        englishSiteValue: "",
      });
    },
    plussAlter() {
      let objCommom = JSON.parse(JSON.stringify(this.alterMount2));
      this.ruleForm.alterCommonArrs.push(objCommom);
      //let objValue = JSON.parse(JSON.stringify(this.common[0]))
      this.alterCommons.push({
        name: "名称(中文)：",
        englishName: "(英文)：",
        site: "地址(中文)：",
        englishSite: "(英文)：",
        values: "",
        englishValues: "",
        siteValues: "",
        englishSiteValues: "",
      });
    },
    plus() {
      let objCommom = JSON.parse(JSON.stringify(this.commonMount1));
      this.ruleForm.commonArr.push(objCommom);
      //let objValue = JSON.parse(JSON.stringify(this.common[0]))
      this.common.push({
        name: "名称(中文)：",
        englishName: "(英文)：",
        site: "地址(中文)：",
        englishSite: "(英文)：",
        value: "",
        englishValue: "",
        siteValue: "",
        englishSiteValue: "",
      });
    },
    pluss() {
      let objCommom = JSON.parse(JSON.stringify(this.commonMount2));
      this.ruleForm.commonArrs.push(objCommom);
      //let objValue = JSON.parse(JSON.stringify(this.common[0]))
      this.commons.push({
        name: "名称(中文)：",
        englishName: "(英文)：",
        site: "地址(中文)：",
        englishSite: "(英文)：",
        values: "",
        englishValues: "",
        siteValues: "",
        englishSiteValues: "",
      });
    },
  },
};
</script>
<style lang="less" scoped>
.btns {
  display: flex;
  justify-content: center;
  .el-button {
    margin: 0 20px;
  }
}
.box2 {
  display: flex;
  flex-direction: column;
  align-items: center;
  // margin-top: 100px;
  width: 100%;
  min-height: 800px;
  .tle {
    font-size: 24px;
    color: #000;
  }
  .el-form {
    width: 100%;
  }
  .must,
  .select {
    display: flex;
    position: relative;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 30px 0 30px;
    margin-bottom: 80px;
    width: 100%;
    // border: 1px solid #bbbbbb;
    border-radius: 10px;
    .botn {
      display: flex;
      justify-content: space-around;
      width: 100%;
      .input {
        width: 120px;
      }
    }
    .el-form-item {
      width: 680px;
    }
    .inline {
      display: flex;
      .el-form-item {
        margin: 0;
        width: 290px !important;
      }
    }
  }
  .must {
    margin-bottom: 20px;
  }
  .line {
    width: calc(100% - 280px);
    margin: 30px auto;
    height: 1px;
    border-top: 1px dashed #d9d9d9;
  }
  .imgHint {
    margin: 5px;
    font-size: 12px;
    line-height: 17px;
    color: #f5222d;
  }
  .affirm {
    font-size: 12px;
    color: #a0a3a5;
    a {
      text-decoration: none;
      color: #3685ff;
    }
  }

  .input {
    width: 120px;
  }
  .upload {
    margin: 20px 0;
  }
  .type-number {
    width: 250px;
  }
  .inform {
    position: absolute;
    top: 10px;
    left: 260px;
    width: 500px;
    font-size: 12px;
    color: #a0a3a5;
    a {
      text-decoration: none;
      color: #3685ff;
    }
  }
  .tle {
    list-style: none;
    margin: 40px 0 20px;
    font-size: 24px;
    & ~ .tle {
      color: #bbb;
    }
  }
  .hint {
    color: #f5222d;
    background-color: #fff;
    .el-form-item__label {
      width: 150px;
    }
    img {
      width: 20px;
    }
  }
  .el-steps {
    width: 70%;
    height: 200px;
  }
  .el-button {
    //display: block;
    display: inline;
    margin: 0 20px;
    // background-color: #67c23a !important;
    // border-color: #67c23a !important;
  }

  .common .el-button {
    background-color: #fff !important;
    border-color: #bbb !important;
  }
}
.dialog-footer {
  display: flex;
  justify-content: space-between;
  color: #fff;
  .lan {
    background-color: #2c9dfc !important;
    border-color: #2c9dfc !important;
  }
}

.addItem {
  display: flex;
  justify-content: space-around;
  width: 100%;
  .common {
    .add-item {
      margin-left: calc(100% - 36px);
    }
    .el-form-item {
      margin: 10px 0;
      width: 100%;
    }
  }
}

.el-checkbox-group {
  margin-top: 10px;
}
.dialog /deep/.el-form-item__label {
  width: 100px !important;
}
.dialog /deep/.el-form-item__content {
  margin-left: 100px !important;
  display: flex;
  justify-content: left;
}
.dialog /deep/.el-input {
  width: 250px;
}
.el-checkbox-group {
  line-height: 14px;
}
.is-checked/deep/.el-radio__inner,
.is-checked/deep/.el-checkbox__inner {
  border-color: #999999;
  background: #999999;
}
.el-radio/deep/.el-radio__inner:hover {
  border-color: #999999 !important;
}
.is-checked/deep/.el-radio__label,
.is-checked/deep/.el-checkbox__label {
  color: #333;
}
.is-focus .el-checkbox__inner {
  border-color: #999999 !important;
}
.el-checkbox/deep/.el-checkbox__inner:hover {
  border-color: #999999 !important;
}
.el-step__head.is-process {
  border-color: #f96900;
  color: #f96900 !important;
}
.hintMsg {
  /deep/.el-dialog__header {
    display: flex;
    justify-content: center;
    font-weight: bold;
  }
  .dialog-footer {
    justify-content: center;
    .el-button {
      border-color: #2c9dfc !important;
      background: #2c9dfc !important;
    }
  }
}
</style>